<template>
  <div class="conMain" >
    <el-card  class="box-card" >
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" size="small" label-width="120px">
            <el-row>
              <el-col :span="24">
              <el-form-item label="创建时间：">
                <el-radio-group
                  v-model="params.date"
                  type="button"
                  class="mr20"
                  size="small"
                  @change="selectChange()"
                >
                  <el-radio-button
                    v-for="(item,i) in fromList.fromTxt"
                    :key="i"
                    :label="item.val"
                  >{{ item.text }}</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="params.s_createtime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  size="small"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="自定义时间"
                  style="width: 250px;"
                  @change="onchangeTime"
                />
              </el-form-item>
              </el-col>
              <el-col :span="24">
              <el-form-item label="订单状态：">
                <el-radio-group v-model="params.s_status" type="button" @change="getList(1)">
                  <el-radio-button label="">全部 </el-radio-button>
                  <el-radio-button  label="1">待付款</el-radio-button>
                  <el-radio-button  label="2">处理中</el-radio-button>
                  <el-radio-button  label="3">已成功 </el-radio-button>
                  <el-radio-button  label="9">已退款 </el-radio-button>
                  <el-radio-button  label="-1">失败 </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="订单编号">
                  <el-input clearable v-model="params.s_sn"  placeholder="请输入订单编号" />
              </el-form-item>
              <el-form-item label="所属渠道">
                  <el-select clearable v-model="params.s_from"  placeholder="请选择">
                   <el-option  :label="item.txt" :value="item.val" v-for="(item,index) in fromlist" />
                  </el-select>
              </el-form-item>
              <el-form-item label="运营商">
                  <el-select clearable v-model="params.s_type"  placeholder="请选择">
                   <el-option  :label="item.txt" :value="item.val" v-for="(item,index) in typelist" />
                  </el-select>
              </el-form-item>

              <el-form-item label="手机号">
                  <el-input clearable v-model="params.s_phone"  placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item label="代理姓名">
                  <el-input clearable v-model="params['s_agent*name']"  placeholder="请输入代理姓名" />
              </el-form-item>
              <el-form-item label="第三方单号">
                  <el-input clearable v-model="params.s_orderno"  placeholder="请输入第三方单号" />
              </el-form-item>

              <el-form-item label=" ">
                <el-button type="primary"  size="small" class="searchBtn" @click="handleSearch" icon='el-icon-search'>搜索</el-button>
                <el-button type="info"  @click="handleRet" plain>重置</el-button>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: right;">
            <el-button v-has="'charge/order/export'"  type="primary" size="small" class="ml10" @click="down" plain><i class="el-icon-download" /> 批量导出</el-button>
          </div>
        </div>

      </div>
      <el-table v-loading="loading"  :data="list" style="width: 100%" :empty-text='emtypetxt'>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-row style="margin-top: 10px;" v-if="props.row.fee_text[0]">
                <el-col :span="6">
                  代理信息：{{props.row.agent_id}}-{{props.row.agent.name}}
                </el-col>
                <el-col :span="6">
                  直接佣金：{{props.row.fee_text[0]}}
                </el-col>
                <el-col :span="6">
                  上级佣金：{{props.row.fee_text[1]}}
                </el-col>
                <el-col :span="6">
                  上上级佣金：{{props.row.fee_text[2]}}
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px;">
                <el-col :span="6">
                  微信支付编号：{{props.row.pay_sn}}
                </el-col>
                <el-col :span="6">
                  退款编号：{{props.row.refund_sn}}
                </el-col>
                <el-col :span="6">
                  退款时间：{{props.row.refund_time}}
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px;">

                <el-col :span="6">
                  失败原因：{{props.row.status_msg}}
                </el-col>
                <el-col :span="6">
                  商品编码：{{props.row.product_code}}
                </el-col>
                <el-col :span="6">
                  成功时间：{{props.row.success_time}}
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="sn" label="订单编号" align="center" min-width="180" />
          <el-table-column prop="from" label="所属渠道" align="center"  >
            <template slot-scope="scope">
              <span v-if="scope.row.from == 1">沃券充值</span>
              <span v-else-if="scope.row.from == 2">DR充值</span>
              <span v-else-if="scope.row.from == 3">新号吧充值</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center"  min-width="130"/>

          <el-table-column prop="type" label="运营商" align="center"  >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">中国联通</span>
              <span v-else-if="scope.row.type == 2">中国移动</span>
              <span v-else-if="scope.row.type == 3">中国电信</span>
            </template>
          </el-table-column>


          <el-table-column prop="price" label="话费面值" align="center"  />
          <el-table-column prop="money" label="支付金额" align="center"  />

          <el-table-column prop="orderno" label="第三方单号" align="center"    :show-overflow-tooltip="true"/>
          <el-table-column prop="status_msg" label="失败原因" align="center"   :show-overflow-tooltip="true" />
          <el-table-column prop="agent.name" label="代理姓名" align="center"  :show-overflow-tooltip="true"/>

          <el-table-column label="订单状态" align="center"  >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="info"   size="mini" disable-transitions>待付款</el-tag>
              <el-tag v-if="scope.row.status == 2" type="primary" size="mini" disable-transitions>处理中</el-tag>
              <el-tag v-else-if="scope.row.status == 3" type="success" size="mini" disable-transitions>已成功</el-tag>
              <el-tag v-else-if="scope.row.status == -1" type="danger" size="mini" disable-transitions>失败</el-tag>
              <el-tag v-else-if="scope.row.status == 9" type="warning" size="mini" disable-transitions>已退款</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="创建时间" align="center" width="160" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope" >
                <el-link v-if="scope.row.status==-1" class="ml10" v-has="'charge/order/refund'" :underline="false" type="warning" title='退款' @click="refund(scope.row)">退款</el-link>
            </template>
          </el-table-column>
      </el-table>
      <div class="pagination">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </div>
    </el-card>


  </div>
</template>

<script>
  import { order_index,order_export,order_refund } from  '@/api/charge'
  import { fromList } from '@/libs/select.js'

  export default {
    data() {
      return {
        dialogVisible:false,
        total:0,
        loading:true,
        emtypetxt:'',
        list: [],
        fromlist:[{val:'1',txt:'沃券充值'},{val:'2',txt:'DR充值'},{val:'3',txt:'新号吧充值'}],
        fromList: fromList,
        params: {
          s_status:'',
          date:'all',
          s_createtime:[],
          s_sn:'',
          s_from:'',
          s_phone:'',
          s_type:'',
          's_agent*name':'',
          s_orderno:'',
          ss_createtime:'BETWEEN',
          page: 1,
          pagesize:10,
        },
        typelist:[{val:'1',txt:'中国联通'},{val:'2',txt:'中国移动'},{val:'3',txt:'中国电信'}],
      }
    },
    created() {

      this.getList()
    },
    methods: {
      getList(page) {
        this.params.page = page?page:this.params.page;
        this.emtypetxt='加载中...';
        this.loading=true;
        order_index(this.params).then(res => {
          this.list=res.data.list
          this.total=res.data.total
          this.loading = false
          if(this.list.length==0){
            this.emtypetxt='暂无数据'
          }
        })
      },
      // 时间筛选
      selectChange(tab) {
        this.params.s_createtime= [];
        this.getList(1);
      },
      onchangeTime(e) {
        this.params.date = 'all';
        this.params.s_createtime = e;
        this.getList(1);
      },
      handleSearch(){
        this.getList(1)
      },
      //分页
      handleSizeChange(val) {
          this.params.pagesize = val
          this.getList(1)
      },
      handleCurrentChange(val) {
          this.params.page = val
          this.getList()
      },
      handleRet(){
        this.params={
          s_status:'',
          date:'all',
          s_createtime:[],
          s_sn:'',
          s_from:'',
          s_phone:'',
          s_type:'',
          's_agent*name':'',
          s_orderno:'',
          ss_createtime:'BETWEEN',
          page: 1,
          pagesize:10,
        }
        this.goodslist=[]
        this.getList()
      },
      refund(row) {
        let _this=this;
        _this.$modalSure('您确定要退款嘛？').then(() => {
          order_refund({id:row.id}).then(res => {
            _this.$message.success(res.msg)
            _this.getList()
          })
        })
      },

      down(){
        const loading = this.$loading({
            lock: true,
            text: '正在导出...',
            spinner: 'el-icon-loading',
            background: 'rgba(20, 20, 20, 0.7)'
        });
        order_export(this.params).then(res => {
          const { export_json_to_excel } = require('../../assets/js/Export2Excel');
          const tHeader = res.data.header;
          const filterVal =res.data.filter;
          const list = res.data.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data,res.data.ename);
          loading.close();
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
  }
</script>

<style>
  .el-upload__tip{
    color:#afafaf;
  }
</style>
